<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>msg ===> {{msg}}</p>
        <p>mymsg ===> {{msg | mysmg}} </p>
        <p>tomsg ===> {{msg | tomsg}}</p>
        <p>num ===> {{num | mynum}} </p>
        <p>phone ===> {{phone | myphone('')}} </p>
        <p>score === {{score | scoreFormat}} </p>
     
    </div>
</body>
<script>
    // 全局过滤器  
    Vue.filter("mysmg",value => {
        if(!value) return "";
        return value.toUpperCase(); //toUpperCase() 转换为大写
    })

    
    Vue.filter("mynum",(value,n) =>{
        if(!value) return " ";
        n = n || 2
        return value.toFixed(n); //toFixed() 保留多少小数位
    })

    Vue.filter("myphone",(value,type) =>{
        if(!value) return ""
        type = "type" || ""
        value = value.toString().split('') //toString() 转为为字符串 split() 把字符串切割成为数组
        console.log(value);
        value.splice(3,0,type) 
        value.splice(8,0,type)
        return value.join('') //join() 把数组转化字符串
    })

    Vue.filter("scoreFormat",value => {
        if(!value) return " "
        if(value > 90) {return "A"}
        else if(value > 80) { return "B"}
        else if(value >70){return "C"}
        else if(value > 60){return "D"}
        else {return 'E'}
    })

    


  
    const vm = new Vue({
        data:{
           title:"过滤器",
           msg:"How Are You ?",
           num:142874.19856521,
           phone:18672777585,
           score:88
        },
        filters:{
            tomsg(value){
                if(!value) return "";
                return value.toLowerCase() ; //toLowerCase 转小写
            }
        },
        methods:{

        },
        mounted(){
            document.querySelectorAll("title")[0].innerHTML = this.title
        }
        
    }).$mount("#app")

</script>
</html>